<template>
    <div>
        <div class="header">
          <span class="left"><el-button type="text" @click="backon()">返回上一级</el-button></span>
          <div class="right">
            <div class="right_abs">
              <p class="right_user">
                <a href="javascript:;">
                  <img class="user_photo" src="../assets/imgs/user_photo.png">
                </a>
                <a href="javascript:;">
                  <span class="user_name">xxx</span>
                  <input class="user_box" style="cursor:pointer;vertical-align: middle;">
                </a>
              </p>
              <ul class="right_space">
                <li class="enter">
                  <a href="javascript:;" @click="space()">进入空间</a>
                </li>
                <li class="exit">
                  <a href="javascript:;" @click="exit()">退出登录</a>
                </li>
                <li>
                  <el-button  type="text" @click="open()">修改姓名</el-button>
                </li>
              </ul>
            </div>
          </div>
        </div>
    </div>
</template>

<script lang="js">
export default{
  data(){
    return{
    }
  },
  methods:{
    exit(){
      this.$router.push({
        path:'/login'
      })
    },
    backon(){
      this.$router.go(-1)
    },
    space(){
      this.$router.push({
        path:'/index'
      })
    },
    open() {
        this.$prompt('请输入姓名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\S/,
          inputErrorMessage: "姓名不能为空"
        }).then(() => {
          this.$message({
            type: 'info',
            message: '修改成功'
          });   
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
  }
}
</script>

<style lang="scss">
  .header{
    width: 100%;
    height: 44px;
    background-color: #4c4c4c;
    position: fixed;
    box-shadow: 0 1px 12px 0 #555555;
    z-index: 100;
    .left{
      margin-left:20px;
    }
    .right{
      width: 106px;
      height: 36px;
      float: right;
      position: relative;
      padding-right: 20px;
      .right_abs{
        width:100%;
        height: 100%;
        margin-top:3px;
        .right_user{
          width: 100%;
          height: 100%;
          padding-top: 8px;
          .user_photo{
            width: 25px;
            height: 25px;
            border-radius: 12px;
            vertical-align: middle;
          }
          .user_name{
            max-width: 60px;
            height: 24px;
            line-height: 24px;
            vertical-align: middle;
            font-size: 14px;
            margin-left: 6px;
            color: #fff;
          }
          .user_box{
            display: inline-block;
            width:10px;
            height: 10px;
            background: url('../assets/imgs/ss_member.png') 0px -115px no-repeat;
            margin: 6px 0 0 5px;
            border-style: none;
            border-width: 0;
            word-spacing: 0px;
          }
        }
        &:hover{
          .right_space{
            opacity: 1;
          }
        }
        .right_space{
          width: 106px;
          height: auto;
          font-size:14px;
          background-color: #555555;
          position: absolute;
          top:44.5px;
          padding-bottom: 15px;
          padding-top: 5px;
          opacity: 0;
          transition: all 0.5s;
        }
        .right_space li{
            color: #ccc;
            padding-left: 30px;
            line-height: 30px;
          }
        .right_space a{
          color: #ccc;
        }
      }
    }
  }
</style>